<!--
 * @Author: luojiajun
 * @Email: company.kachun@gmail.com
 * @Date: 2021-07-03 15:02:29
 * @FilePath: /src/views/service/application/mine.vue
 * @LastEditTime: 2021-07-16 14:26:22
 * @LastEditors: luojiajun
-->
<template>
    <div class="app-container app-height">
        <div class="bg-white">
            <el-form ref="ruleForm" :model="ruleForm" label-width="110px" class="application-form clearfix">
                <el-form-item label="服务中文名称" prop="apiName" class="float-left">
                    <el-input v-model="ruleForm.apiName" placeholder="请输入服务中文名称" clearable ></el-input>
                </el-form-item>

                <el-form-item label="所属组" prop="groupId" class="float-left">
                    <el-select v-model="ruleForm.groupId" placeholder="请选择所属组" clearable>
                        <el-option v-for="item in groupList" :label="item.name" :value="item.id" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="时间" prop="datetime" class="float-left">
                    <el-date-picker
                        v-model="ruleForm.datetime"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="changeDatetimePicker"
                        align="left"
                        clearable
                    >
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="服务英文名称" prop="apiNameEn" class="float-left">
                    <el-input v-model="ruleForm.apiNameEn" placeholder="请输入服务英文名称" clearable ></el-input>
                </el-form-item>

                <el-form-item label="调用路径" prop="requestPath" class="float-left">
                    <el-input v-model="ruleForm.requestPath" placeholder="请输入调用路径" clearable ></el-input>
                </el-form-item>
                
                <el-form-item v-show="activeName != '1'" label="状态" prop="apiStatus" class="float-left">
                    <el-select v-model="ruleForm.apiStatus" placeholder="请选择状态" clearable>
                        <el-option
                            v-for="item in $enum.TABLE_APPROVE_STATUS_OPTIONS"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label-width="15px" class="application-form-btn float-left">
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="fetchData">查询</el-button>
                    <el-button type="primary" size="mini" @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>

            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="我的创建" name="1">
                    <application-mine-created :form="ruleForm" ref="created"></application-mine-created>
                </el-tab-pane>
                <el-tab-pane label="我的发布" name="2">
                    <application-mine-published :form="ruleForm" ref="published"></application-mine-published>
                </el-tab-pane>
                <el-tab-pane label="我的订阅" name="3">
                    <application-mine-subscribe :form="ruleForm" ref="subscribe"></application-mine-subscribe>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import { getUserApiGroup } from "@/api/dataManagement/system/user";
import ApplicationMineCreated from "@/views/service/application/components/ApplicationMineCreated";
import ApplicationMinePublished from "@/views/service/application/components/ApplicationMinePublished";
import ApplicationMineSubscribe from "@/views/service/application/components/ApplicationMineSubscribe";

export default {
    name: "MineApplication",
    components: {
        ApplicationMineCreated,
        ApplicationMinePublished,
        ApplicationMineSubscribe
    },
    data() {
        return {
            activeName: "1",
            ruleForm: {
                datetime: [],
                apiName: '',
                apiNameEn: '',
                apiStatus: '',
                createName: '',
                createTimeStart: '',
                createTimeEnd: '',
                groupId: '',
                requestPath: '',
                // viewType: 1 // 接口状态 查看类型 1.我的创建 2.我的发布 3.我的订阅
            },
            groupList: [],
            pickerOptions: {},
        };
    },
    created() {
        this.getUserApiGroup()
    },
    activated() {
        this.getUserApiGroup()
    },
    methods: {
        handleClick(value) {
            value.name == 1 && this.$refs.created.fetchData()
            value.name == 2 && this.$refs.published.fetchData()
            value.name == 3 && this.$refs.subscribe.fetchData()
        },
        // 获取分组列表
        getUserApiGroup() {
            getUserApiGroup().then(res => {
                if (res.code === 200) {
                    this.groupList = res.data
                }
            })
        },
        changeDatetimePicker(data){
            let startTime = '', endTime = ''
            if (data && data.length) {
                startTime = this.parseTime(new Date(data[0]),'{y}-{m}-{d} {h}:{i}:{s}');
                endTime = this.parseTime(new Date(data[1]),'{y}-{m}-{d} {h}:{i}:{s}');
            }
            this.ruleForm.createTimeStart = startTime;
            this.ruleForm.createTimeEnd = endTime;
		},
        resetForm() {
            this.$refs.ruleForm.resetFields()
            this.ruleForm.createTimeStart = '';
            this.ruleForm.createTimeEnd = '';
            this.fetchData()
        },
        fetchData() {
            this.activeName == 1 && this.$refs.created.fetchData()
            this.activeName == 2 && this.$refs.published.fetchData()
            this.activeName == 3 && this.$refs.subscribe.fetchData()
        }
    }
};
</script>

<style lang="scss" scoped>
.app-container {
    padding: 20px;

    .application-form ::v-deep {
        .el-form-item__label {
            text-align: right;
        }
    }
}
</style>
